<template>
  <div class="dict-container">
    <div class="dict-layout">
      <!-- 左侧字典列表面板 -->
      <div class="dict-left-panel">
        <div class="search-section">
          <!-- 搜索表单 -->
          <el-form :inline="true" :model="searchForm" class="search-form">
            <div class="basic-search-row">
              <!-- 字典名称搜索框 -->
              <el-form-item label="字典名称" style="margin-bottom: 0">
                <el-input
                  v-model.trim="searchForm.name"
                  placeholder="请输入字典名称"
                  clearable
                  prefix-icon="Search"
                  @keyup.enter="$emit('search')"
                  style="width: 200px"
                />
              </el-form-item>

              <!-- 搜索按钮组 -->
              <div class="search-actions">
                <el-button type="primary" icon="Search" @click="handleSearch"> 搜索 </el-button>
                <el-button icon="RefreshRight" @click="resetSearch"> 重置 </el-button>
              </div>
            </div>
          </el-form>

          <!-- 操作按钮区域 -->
          <div class="operation-container mb-10">
            <el-button type="primary" icon="Plus" @click="handleAdd">新增字典</el-button>
            <el-tooltip content="刷新数据" placement="top" effect="light">
              <el-button icon="RefreshRight" circle @click="loadDictList"></el-button>
            </el-tooltip>
          </div>

          <!-- 字典列表组件 -->
          <dict-list
            :loading="loading"
            :dict-list="dictList"
            :current-dict="currentDict"
            @select="handleRowSelect"
            @edit="handleEdit"
            @refresh="loadDictList"
          />

          <!-- 分页组件 -->
          <pagination :pagination="pagination" @size-change="onSizeChange" @page-change="onPageChange" />
        </div>
      </div>

      <!-- 右侧字典数据面板 -->
      <div class="dict-right-panel">
        <div v-if="currentDict" class="dict-data-section">
          <div class="dict-data-header">
            <h3>{{ currentDict.name }} - 字典数据</h3>
            <div class="dict-data-actions">
              <el-button type="primary" icon="Plus" @click="handleAddDictData">新增数据项</el-button>
            </div>
          </div>

          <!-- 字典数据列表组件 -->
          <dict-data-list :current-dict-data-list="currentDictDataList" @edit="handleEditDictData" @refresh="() => loadDictData(currentDict)" />
        </div>
        <div v-else class="dict-data-placeholder">
          <el-empty description="请选择左侧字典查看数据" />
        </div>
      </div>
    </div>

    <!-- 字典编辑弹窗 -->
    <dict-modal v-model="modalVisible" :dict-data="editingDict" @success="handleDictSuccess" />

    <!-- 字典数据项编辑弹窗 -->
    <dict-data-item-modal
      v-model="dictDataItemModalVisible"
      :current-dict="currentDict"
      :editing-dict-data="editingDictData"
      @success="handleDictDataSuccess"
    />
  </div>
</template>

<script setup>
  import { useDictApi } from '@/api/dict-api.js';
  import DictModal from './components/DictModal.vue';
  import DictDataItemModal from './components/DictDataItemModal.vue';
  import DictList from './components/DictList.vue';
  import DictDataList from './components/DictDataList.vue';
  import Pagination from '@/components/BasePagination.vue';

  const dictApi = useDictApi();

  // 字典相关状态
  const loading = ref(false);
  const modalVisible = ref(false);
  const dictList = ref([]);
  const currentDict = ref(null);
  const editingDict = ref(null);

  // 字典数据相关状态
  const dictDataItemModalVisible = ref(false);
  const currentDictDataList = ref([]);
  const editingDictData = ref(null);

  // 分页配置
  const pagination = reactive({
    page: 1,
    size: 10,
    total: 0,
  });

  // 搜索表单数据
  const searchForm = ref({
    name: '',
    type: '',
  });

  /**
   * 加载字典列表数据
   */
  const loadDictList = async () => {
    currentDict.value = null;
    loading.value = true;
    try {
      const params = {
        page: pagination.page,
        size: pagination.size,
        ...searchForm.value,
      };
      const { data } = await dictApi.getDictList(params);
      dictList.value = data.list || [];
      pagination.total = data.total || 0;
    } catch (error) {
      ElMessage.error('获取字典列表失败: ' + error.message);
    } finally {
      loading.value = false;
    }
  };

  /**
   * 选择字典行
   * @param {Object} row 选中的字典行数据
   */
  const handleRowSelect = (row) => {
    currentDict.value = row;
    loadDictData(row);
  };

  /**
   * 加载字典数据项列表
   * @param {Object} dict 当前选中的字典对象
   */
  const loadDictData = async (dict) => {
    if (!dict) return;
    try {
      const { data } = await dictApi.getDictDataList(dict);
      currentDictDataList.value = data || [];
    } catch (error) {
      ElMessage.error('获取字典数据失败: ' + error.message);
    }
  };

  // 字典操作方法
  /**
   * 新增字典
   */
  const handleAdd = () => {
    editingDict.value = null;
    modalVisible.value = true;
  };

  /**
   * 编辑字典
   */
  const handleEdit = (row) => {
    editingDict.value = { ...row };
    modalVisible.value = true;
  };

  /**
   * 字典操作成功回调
   */
  const handleDictSuccess = () => {
    loadDictList();
    modalVisible.value = false;
  };

  // 字典数据项操作方法
  /**
   * 新增字典数据项
   */
  const handleAddDictData = () => {
    if (!currentDict.value) {
      ElMessage.warning('请先选择字典');
      return;
    }
    editingDictData.value = null;
    dictDataItemModalVisible.value = true;
  };

  /**
   * 编辑字典数据项
   */
  const handleEditDictData = (item) => {
    editingDictData.value = { ...item };
    dictDataItemModalVisible.value = true;
  };

  /**
   * 字典数据操作成功回调
   */
  const handleDictDataSuccess = () => {
    loadDictData(currentDict.value);
    dictDataItemModalVisible.value = false;
  };

  // 分页和搜索方法
  /**
   * 搜索字典
   */
  const handleSearch = () => {
    pagination.page = 1;
    loadDictList();
  };

  /**
   * 重置搜索
   */
  const resetSearch = () => {
    searchForm.value = { name: '', type: '' };
    pagination.page = 1;
    loadDictList();
  };

  /**
   * 改变每页显示数量
   */
  const onSizeChange = (size) => {
    pagination.size = size;
    loadDictList();
  };

  /**
   * 改变当前页码
   */
  const onPageChange = (page) => {
    pagination.page = page;
    loadDictList();
  };

  // 页面加载时获取字典列表
  onMounted(() => {
    loadDictList();
  });
</script>

<style lang="scss" scoped>
  .dict-container {
    .dict-layout {
      display: flex;
      height: 100%;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    .dict-left-panel {
      width: 50%;
      padding: 20px;
      border-right: 1px solid #e9ecef;
      background-color: #ffffff;

      .search-section {
        margin-bottom: 20px;
      }

      .operation-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px 0px;
      }
    }

    .dict-right-panel {
      width: 50%;
      padding: 20px;
      background-color: #f9fafb;

      .dict-data-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #e9ecef;

        h3 {
          margin: 0;
          font-size: 18px;
          color: #2c3e50;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 10px;

          &::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 18px;
            background-color: #3498db;
            border-radius: 3px;
          }
        }
      }

      .dict-data-placeholder {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100% - 60px);
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
      }
    }

    // 响应式设计
    @media (max-width: 1200px) {
      .dict-layout {
        flex-direction: column;
      }

      .dict-left-panel,
      .dict-right-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
      }
    }
  }

  .search-form {
    display: flex;
    flex-direction: column;
    background-color: rgba(249, 250, 251, 0.6);
    backdrop-filter: blur(8px) saturate(150%);
    border: 1px solid rgba(229, 231, 235, 0.3);
    padding: 15px;
    border-radius: 12px;
    transition: all 0.3s ease;

    .basic-search-row {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 0;
    }
  }
</style>
@/api/dict-api